<template>
  <div>
    <BasicTable @register="registerTable">
      <!-- 工具栏 -->
      <template #toolbar>
        <a-button type="primary" @click="handleCreate">新增</a-button>
      </template>

      <!-- 自定义列 -->
      <template #sex="{ record }">
        {{ record.sex == 1 ? '男' : record.sex == 2 ? '女' : '未知' }}
      </template>
      <template #status="{ record }">
        <Tag v-if="record.status == 1" color="green"> 居家 </Tag>
        <Tag v-if="record.status == 2" color="purple"> 外出 </Tag>
        <Tag v-if="record.status == 3" color="orange"> 预警 </Tag>
        <Tag v-if="record.status == 4" color="red"> 报警 </Tag>
      </template>

      <!-- 操作列 -->
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'clarity:note-edit-line',
              tooltip: '编辑少儿资料',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              tooltip: '删除此少儿',
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>

    <AccountModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { Tag } from 'ant-design-vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getBasicColumns, getFormConfig } from './tableData';

  import AccountModal from './AccountModal.vue';

  import { useModal } from '/@/components/Modal';
  import { getProductApi, delProductApi } from '/@/api/admin/goods';

  export default defineComponent({
    components: { BasicTable, AccountModal, TableAction, Tag },
    setup() {
      const [registerModal, { openModal }] = useModal();
      const [registerTable, { getForm, reload }] = useTable({
        title: '物资列表',
        api: getProductApi,
        columns: getBasicColumns(),
        useSearchForm: true,
        formConfig: getFormConfig(),
        showTableSetting: true,
        tableSetting: { fullScreen: true },
        // 是否显示序号列
        showIndexColumn: false,
        bordered: true,
        // 开启表单后，在请求之前处理搜索条件参数
        handleSearchInfoFn(info) {
          console.log('handleSearchInfoFn', info);
          return info;
        },
        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        rowKey: 'id',
      });

      function getFormValues() {
        console.log(getForm().getFieldsValue());
      }

      // 创建账号
      function handleCreate() {
        openModal(true, {
          isUpdate: false,
        });
      }

      // 编辑
      async function handleEdit(record: Recordable) {
        console.log(record);
        openModal(true, {
          record,
          isUpdate: true,
        });
      }

      // 删除
      async function handleDelete(record: Recordable) {
        await delProductApi(record.id);
        reload();
        console.log(record);
        console.log(record, 1);
      }

      // 创建 || 修改 成功回调
      function handleSuccess() {
        reload();
        // staffListApi({ page: 1, pageSize: 10 });
      }

      return {
        registerModal,
        registerTable,
        getFormValues,
        handleCreate,
        handleEdit,
        handleDelete,
        handleSuccess,
      };
    },
  });
</script>
